import React, {useEffect, useState,} from "react";
import MarkDownPreView from "../../components/MdPreview";
import {getComments, getOneArticle} from "../../api/modules/article";
import {useNavigate, useSearchParams} from "react-router-dom";
import {Avatar, Button, Input} from "antd";

const ModalCom = () => {
    const [ content ,setContent] = useState('');
    const [ comment ,setComment] = useState('');
    const [ comments ,setComments] = useState([]);
    const [search,setsearch] = useSearchParams()
    const navigate = useNavigate()
    const getArticle = async()=>{
        const id = search.get('id')
        const {data,code} : {data:any,code:number} = await getOneArticle(id as string);
        if(code === 200){
            setContent(data.content)
        }
    }
    const getComment = async ()=>{
        const id = search.get('id')
       const {data} = await getComments(id as string)
        setComments(data as any);
    }
    useEffect(()=>{
        getArticle()
        getComment()
    },[])
    const  handleBack = ()=>{
        navigate(-1);
    }
    const commentHanlder = (e:any)=>{
        setComment(e.target.value)
    }

    const Comments:any = comments.map((item:any)=>{
       return (
           <div style={{borderBottom:'1px solid #ccc',display:'flex'}} key={item.id}>
                {/*头像*/}
                <div style={{width:'50px'}}>
                    <Avatar src={`localhost/file/${item.avatar}`}></Avatar>
                </div>
               {/*内容*/}
               <div style={{flex:'1'}}>
                   <span style={{marginRight:'10px',display:'inline-block'}}>{item.nickname}</span>
                   <span>{item.content}</span>
               </div>
           </div>
       )
    })
    return (
        <>
            <Button type="primary" onClick={handleBack}>返回</Button>
            <MarkDownPreView content={content}></MarkDownPreView>
            <div>
                <h4>评论</h4>
                <hr/>
                <div>
                    <Input.TextArea  value={comment} onChange={commentHanlder}></Input.TextArea>
                    <Button style={{float:'right',marginTop:'10px'}}>评论</Button>
                </div>
            </div>

        {/*    评论列表*/}
            <div>
                {Comments}
            </div>
        </>
    );
};

export default ModalCom
